<template>
	<div
		class="cl-chat-session"
		:class="{
			'is-position': browser.isMini,
			'is-show': sessionVisible
		}"
	>
		<!-- 关键字搜索 -->
		<div class="cl-chat-session__search">
			<el-input
				v-model="keyword"
				placeholder="搜索"
				prefix-icon="el-icon-search"
				size="small"
				clearable
				@clear="onSearch"
				@keyup.enter.native="onSearch"
			/>
		</div>

		<!-- 会话列表 -->
		<ul class="cl-chat-session__list scroller1" ref="scroller" v-loading="loading">
			<template v-for="item in list">
				<li
					class="cl-chat-session__item"
					:key="item.cr_id"
					:class="{
						'is-active': session ? item.cr_id == session.cr_id : false
					}"
					@click="toDetail(item)"
				>
					<!-- @contextmenu.stop.prevent="openCM($event, item.cca_id, index)" -->
					<!-- 头像 -->
					<div class="avatar">
						<el-badge
							:value="item.unread_total"
							:hidden="item.unread_total === 0"
							:max="99"
							size="mini"
						>
							<!-- <img :src="item.headimgurl" alt="" /> -->
							<cl-avatar :src="item.cca_avatar" shape="square" size="medium" />
						</el-badge>
					</div>

					<!-- 昵称，内容 -->
					<div class="det">
						<p class="flex nickname">
							<cl-flex1 class="ellipsis">{{ item.cca_name }}</cl-flex1>
							<span class="time">{{ item.updated_time }}</span>
						</p>
						<!-- <p class="content">{{ item.update_at }}</p> -->
						<p class="ellipsis content ">{{ item.last_msg }}</p>
					</div>
				</li>
			</template>
		</ul>
	</div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import { ContextMenu } from "cl-admin-crud";
import eventBus from "../utils/event-bus";
import dayjs from "dayjs";
import { parseContent } from "../utils";
export default {
	name: "chat-session",
	data() {
		return {
			loading: false,
			pagination: {
				page: 1,
				size: 100,
				total: 0
			},
			keyword: ""
		};
	},

	computed: {
		...mapGetters(["sessionList", "session", "browser", "sessionVisible"]),
		// 列表数据
		list() {
			return this.sessionList
				.filter(v => v.cca_name.includes(this.keyword))
				.sort((a, b) => {
					return a.updated_at - b.updated_at > 0 ? -1 : 1;
				})
				.map(v => {
					return {
						...v,
						cca_name: v.cca_name || "",
						last_msg: parseContent(v),
						updated_time: dayjs(v.updated_at).format("MM/DD HH:mm:ss")
					};
				});
		}
	},

	sockets: {
		send() {
			this.scrollToTop();
		}
	},
	beforeCreate() {
		// 销毁事件
		eventBus.$off("session.refresh");
	},

	created() {
		// 监听列表刷新
		eventBus.$on("session.refresh", this.refresh);
		// PC 端下首次请求读取第一个消息
		// this.refresh().then(res => {
		// 	if (!isEmpty(res) && !this.browser.isMini) {
		// 		this.setSession(res[0]);
		// 	}
		// });
	},

	methods: {
		...mapMutations(["CLEAR_SESSION", "CLOSE_SESSION"]),
		...mapActions(["getLocalSesstionList", "setSession"]),

		// 右键菜单
		openCM(e, cca_id, index) {
			ContextMenu.open(e, {
				list: [
					{
						label: "删除",
						icon: "el-icon-delete",
						callback: (_, done) => {
							this.$service.im.session.delete({
								ids: cca_id
							});

							this.list.splice(index, 1);

							if (cca_id == this.session.cca_id) {
								this.toDetail();
							}

							done();
						}
					}
				]
			});
		},

		// 刷新列表
		refresh(params) {
			this.loading = true;
			console.log("刷新 refresh session");
			return this.$store
				.dispatch("getSessionList", {
					...this.pagination,
					keyword: this.keyword,
					params
				})
				.done(() => {
					this.loading = false;
					this.scrollToTop();
				});
		},

		// 搜索关键字
		onSearch() {
			// this.refresh({ page: 1 });
		},

		// 会话详情
		toDetail(item) {
			if (item) {
				// 点击关闭弹窗
				if (this.browser.isMini) this.CLOSE_SESSION();

				// 设置为当前会话
				if (!this.session || this.session.cca_id != item.cca_id) {
					this.setSession(item);
				}
			} else {
				this.CLEAR_SESSION();
			}
		},
		// 滚动到顶部
		scrollToTop() {
			this.$nextTick(() => {
				if (this.$refs.scroller) {
					this.$refs.scroller.scrollTo({
						top: 0,
						behavior: "smooth"
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.cl-chat-session {
	height: 100%;
	width: 0;
	transition: width 0.2s ease-in-out;
	border-radius: 5px;
	background-color: #fff;
	overflow: hidden;

	&.is-show {
		width: 250px;
		max-width: 100%;
		margin-right: 5px;
	}

	&.is-position {
		position: absolute;
		left: 5px;
		top: 51px;
		height: calc(100% - 56px);
		z-index: 3000;

		&.is-show {
			width: calc(100% - 10px);
		}
	}

	&__search {
		padding: 10px;
	}

	&__list {
		height: calc(100% - 52px);
		overflow: auto;

		li {
			display: flex;
			align-items: center;
			list-style: none;
			padding: 10px 6px;
			border-left: 5px solid #fff;
			transition: all 0.2s ease-in-out;

			.avatar {
				margin-right: 12px;

				// img {
				// 	display: block;
				// 	height: 40px;
				// 	width: 40px;
				// 	border-radius: 3px;
				// 	background-color: #eee;
				// }
				::v-deep.cl-avatar {
					background-color: #fff;
				}
				.el-badge {
					&__content {
						height: 14px;
						line-height: 14px;
						padding: 0 4px;
						background-color: #fa5151;
						border: 0;
					}
				}
			}

			.det {
				flex: 1;
				overflow: hidden;
				.nickname {
					font-size: 14px;
					margin-top: 1px;
					height: 14px;
					.time {
						color: #ccc;
						font-size: 12px;
					}
				}

				.content {
					font-size: 12px;
					margin-top: 6px;
					color: #ccc;
				}
			}

			&:hover {
				background-color: #f3f3f3;
				border-color: #f3f3f3;
				cursor: pointer;
			}
			&.is-active {
				background-color: mix(#fff, $primary, 90%);
				border-color: $color-primary;
			}
		}
	}

	&__empty {
		text-align: center;
		margin-top: 10px;
	}
}
</style>
